<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openAdd">{{$t('attendance.overtime_setting')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :title="$t('table.setting')" width="50%">
      <el-container>
        <el-aside width="200px">
          <el-tree ref="tree" :data="tree" :props="defaultProps" show-checkbox node-key="id" @check-change="handleNodeClick" @check="getCheckedNodes"
            check-on-click-node />
        </el-aside>
        <el-main>
          <header style="font-size:20px;margin-bottom:10px">{{$t('attendance.overtime_setting')}}</header>
          {{check_company_list}}
          <el-select v-model="overtime" :placeholder="$t('validation.overtime')">
            <el-option :label="item.overtime_name" :value="item.id" v-for="(item,index) in overtime_option" :key="index"></el-option>
          </el-select>
          <div style="margin-top:20px">
            <el-button type="primary" size="mini" @click="submitForm()">{{$t('table.complete')}}</el-button>
          </div>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import {
  getCompanyList,
  getDepartmentList,
  getStaffList,
  getOvertimeList,
  addOvertime,
} from "@/api/attendance_management/overtime.js";

export default {
  data() {
    return {
      defaultProps: {
        label: "title",
        children: "children",
      },
      tree: [],
      loading: false,
      company_list: [],
      department_list: [],
      staff_list: [],
      dialogTableVisible: false,
      isLoad: false,
      overtime_option: [],
      check_list: null,
      check_department_list: [],
      check_company_list: [],
      check_arr: [],
      overtime: null,
    };
  },
  methods: {
    openAdd() {
      this.dialogTableVisible = true;
      if (this.isLoad == false) {
        this.getCompanyLists();
        this.isLoad = true;
      }
      this.getOvertimeLists();
      // this.getDepartmentLists(27);
      // this.getStaffLists(25);
    },
    handleNodeClick() {
      let currentNode = this.$refs.tree.getCurrentNode();
      if (currentNode.level == 0 && currentNode.isLoad == false) {
        currentNode.isLoad = true;
        this.getDepartmentLists(currentNode.id, currentNode.children);
      } else if (currentNode.level == 1 && currentNode.isLoad == false) {
        currentNode.isLoad = true;
        this.getStaffLists(currentNode.id, currentNode.children);
      } else {
        return;
      }
    },
    // 获取选中的员工ID数组列表
    getCheckedNodes() {
      this.check_arr = [];
      this.check_department_list = [];
      this.check_company_list = []
      this.check_list = this.$refs.tree.getCheckedNodes();

      this.check_list.forEach((item) => {
        console.log(item,'IIIIIIIIIIIIIIII');
        if (item.level == 0) {
          this.check_company_list.push(item.id);
        }
        if (item.level == 1) {
          this.check_department_list.push(item.id);
        }
        if (item.level == 2) {
          this.check_arr.push(item.id);
        }
      });
    },

    // 获取公司列表
    getCompanyLists() {
      getCompanyList(store.getters.token).then((res) => {
        for (let item of res.data.list) {
          let company = {
            level: 0,
            id: item.id,
            title: item.company,
            children: [],
            isLoad: false,
          };
          this.tree.push(company);
        }
      });
    },
    // 获取部门列表
    getDepartmentLists(company_id, parentNode) {
      getDepartmentList(store.getters.token, { company_id: company_id }).then(
        (res) => {
          let department_list = [];
          for (let item of res.data.list) {
            let department = {
              level: 1,
              id: item.id,
              company_id: company_id,
              title: item.department,
              children: [],
              isLoad: false,
            };
            parentNode.push(department);
          }
        }
      );
    },
    // 获取员工列表
    getStaffLists(department_id, parentNode) {
      getStaffList(store.getters.token, { department_id: department_id }).then(
        (res) => {
          for (let item of res.data.list) {
            let staff = {
              level: 2,
              id: item.person_id,
              title: item.name,
              children: [],
            };
            parentNode.push(staff);
          }
        }
      );
    },
    // 获取时段列表
    getOvertimeLists() {
      getOvertimeList(store.getters.token).then((res) => {
        if (res.data.status) {
          this.overtime_option = res.data.list;
        } else {
          console.error("获取数据失败");
        }
      });
    },

    submitForm() {
      // 添加
      addOvertime(store.getters.token, {
        person: this.check_arr,
        company:this.check_company_list,
        department:this.check_department_list,
        overtime_id: this.overtime,
      }).then((res) => {
        if (this.overtime == null) {
          this.$message.warning(this.$t("table.setting_tip"));
        } else if (res.data.status) {
          this.$message.success(this.$t("table.setting_complete"));
          this.$emit("getList");
          this.dialogTableVisible = false;
        } else {
          this.$message.error(this.$t("table.setting_fail"));
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  text-align: center;
}

.el-main {
  padding-left: 20px;
  border-left: 1px solid #999;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>